<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        .swiper {
            margin: 0 auto;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }

        .swiper .swiper-wrap {
            white-space: nowrap;
            position: relative;
            width: 100%;
            height: 100%;
            left: 0;
            transition: all 1s;
        }

        .swiper .swiper-slide {
            width: 100%;
            height: 100%;
            display: inline-block;

        }

        .swiper .left-arrow {
            position: absolute;
            top: 50%;
            left: 1%;
            transform: translateY(-50%);
            z-index: 3;
            color: red;
            margin-left: 1rem;
            width: 3.5rem;
            height: 3.5rem;
        }

        .swiper .right-arrow {
            width: 3.5rem;
            height: 3.5rem;
            position: absolute;
            top: 50%;
            right: 1%;
            transform: translateY(-50%);
            z-index: 3;
            margin-right: 1rem;
            color: red;
        }


        .swiper .left-arrow img,
        .right-arrow img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.3s;
        }

        .swiper .left-arrow img:active,
        .right-arrow img:active {
            transform: scale(1.2);
            filter: opacity(0.8);
        }


        .swiper .pagination {
            min-width: 200px;
            height: 20px;
            text-align: center;
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
        }

        .swiper .dot {
            width: 18px;
            height: 18px;
            display: inline-block;
            margin: 0 2px;
            border-radius: 50%;
            background: #ccc;
            transition: all 0.5s;
        }

        .swiper .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .isActive {
            background: blue !important;
        }
    </style>
    <script defer>
        let swiperList = [];
        let currentIndex = 0;
        window.onload = function () {
            ajax({
                method: "get",
                url: "/api/getListTest",
            }).then((res) => {
                let swiper = document.getElementsByClassName('swiper-wrap')[0];
                let pagination = document.getElementsByClassName('pagination')[0];
                const { data } = res || { data: [] };
                swiperList = data;
                for (let i in data) {
                    const element = document.createElement('div');
                    const img = document.createElement('img');
                    img.src = data[i];
                    console.log(data[i])
                    element.className = 'swiper-slide';
                    // element.innerHTML = i;
                    element.appendChild(img);
                    swiper.appendChild(element)

                    const dot = document.createElement('div');
                    if (i == 0) {
                        dot.className = 'dot isActive';
                    } else {
                        dot.className = 'dot';
                    }
                    dot.onclick = function () {
                        currentIndex = i;
                        swiper.style.left = `-${currentIndex * 500}px`;
                        [...document.getElementsByClassName('dot')].forEach((item) => {
                            item.className = 'dot'
                        })
                        dot.className = 'dot isActive';
                    }
                    pagination.appendChild(dot)

                }
                // setTimeout(() => {
                //     swiper.style.left = '-500px';
                // }, 1000)
            }).catch((err) => console.log(err))

            // 监听左右滑动
            let box = document.getElementById('swiper');
            let startTime = '' // 触摸开始时间
            let startDistanceX = '' // 触摸开始X轴位置
            let startDistanceY = '' // 触摸开始Y轴位置
            let endTime = '' // 触摸结束时间
            let endDistanceX = '' // 触摸结束X轴位置
            let endDistanceY = '' // 触摸结束Y轴位置
            let moveTime = '' // 触摸时间
            let moveDistanceX = '' // 触摸移动X轴距离
            let moveDistanceY = '' // 触摸移动Y轴距离
            box.addEventListener("touchstart", (e) => {
                startTime = new Date().getTime()
                startDistanceX = e.touches[0].screenX
                startDistanceY = e.touches[0].screenY
            })
            box.addEventListener("touchend", (e) => {
                endTime = new Date().getTime()
                endDistanceX = e.changedTouches[0].screenX
                endDistanceY = e.changedTouches[0].screenY
                moveTime = endTime - startTime
                moveDistanceX = startDistanceX - endDistanceX
                moveDistanceY = startDistanceY - endDistanceY
                console.log(moveDistanceX, moveDistanceY)
                // 判断滑动距离超过40 且 时间小于500毫秒
                if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
                    // 判断X轴移动的距离是否大于Y轴移动的距离
                    if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
                        // 左右
                        // console.log(moveDistanceX > 0 ? '左' : '右')
                        if (moveDistanceX > 0) {
                            // 左
                            toMove('right')

                        } else {
                            // 右
                            toMove('left')
                        }
                    } else {
                        // 上下
                        // console.log(moveDistanceY > 0 ? '上' : '下')
                    }
                }
            })

        }

        function ajax({ method, url, data }) {
            let ajax = new XMLHttpRequest();
            if (method == 'get') {
                let query = "?";
                for (let i in (data || {})) {
                    query = query + i + `=${data[i]}&`
                }
                query = query.slice(0, query.length - 1);
                ajax.open(method, url + query, true);
                ajax.send();
            } else if (method == 'post') {
                ajax.open(method, url, true);
                ajax.send(JSON.stringify(data));
            }
            return new Promise((resolve, reject) => {
                // 监听状态码
                ajax.onreadystatechange = function () {
                    if (ajax.readyState == 4 && ajax.status == 200) {
                        console.log(ajax.status)
                        // console.log(ajax.response, JSON.parse(ajax.response))
                        let result = JSON.parse(ajax.response)
                        resolve(result)
                    }

                    if (ajax.readyState == 4 && (ajax.status == 500 || ajax.status == 400)) {
                        let result = JSON.parse(ajax.response)
                        reject(result)
                    }
                }
            })
        }

        function toMove(type) {
            let swiper = document.getElementsByClassName('swiper-wrap')[0];
            if (type == 'left') {
                if (currentIndex == 0) {
                    currentIndex = swiperList.length - 1;
                } else {
                    currentIndex--;
                }
            } else {
                if (currentIndex == swiperList.length - 1) {
                    currentIndex = 0;
                } else {
                    currentIndex++;
                }
            }
            [...document.getElementsByClassName('dot')].forEach((item, index) => {
                item.className = 'dot'
                if (index == currentIndex) {
                    item.className = 'dot isActive'
                }
            })
            swiper.style.left = `-${currentIndex * 100}%`
        }


    </script>
</head>

<body>
    <div class="swiper" id="swiper">
        <div class="swiper-wrap"></div>
        <div class="left-arrow" onclick="toMove('left')">
            <img src="http://a1.qpic.cn/psc?/V53S5pDe1Je8Cx2WgeCB11GfNE4WdSrb/bqQfVz5yrrGYSXMvKr.cqesxLW5HhdFYYHEUM44hhEarJkPcbhDqfMKQEdC2YJuNy17p3yANr7zfb3hNNHjEB88evlf0wulGSn.I7UmODrI!/m&ek=1&kp=1&pt=0&bo=yADIAAAAAAADFzI!&tl=1&vuin=384268214&tm=1661256000&dis_t=1661258578&dis_k=530fe7fe8fc7eeca76b6cff017ba138c&sce=60-3-3&rf=0-0" alt="">
        </div>
        <div class="right-arrow" onclick="toMove('right')">
            <img src="http://a1.qpic.cn/psc?/V53S5pDe1Je8Cx2WgeCB11GfNE4WdSrb/bqQfVz5yrrGYSXMvKr.cqZqWEOI7GfbQ0BOS2OKyQGiajWcsqa0THGVgLyrfaJy32oZRApUG54GBke9lb5j8EYjanIidh9CPNxVRER3VKtI!/m&ek=1&kp=1&pt=0&bo=yADIAAAAAAADFzI!&tl=1&vuin=384268214&tm=1661256000&dis_t=1661258578&dis_k=1cf83f25c9c3093f60c8f610981148c9&sce=60-3-3&rf=0-0" alt="">
        </div>

        <div class="pagination">

        </div>
    </div>
</body>

</html>